﻿
<div class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north',border:false" style="height: 140px; border-bottom-width: 1px; padding: 10px; font-size: 14px;">
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewColumnToggleSource" target="_blank">点击查看扩展代码</a>
        <a class="easyui-linkbutton" data-options="iconCls:'icon-search'" href="/Datagrid/ViewDatagridCssSource" target="_blank">点击查看扩展样式</a>
        <br />
        js依赖项：
        <br />
        [query-1.11.0.js]、[jquery.jdirk.js]、[jquery.easyui.min.js]、[jeasyui.extensions.menu.js]、[jeasyui.extensions.datagrid.columnToggle.js]

        <br /><br />
        css依赖项：
        <br />
        [jeasyui.extensions.datagrid.css]
    </div>
    <div data-options="region:'center',border:false,title:'此处仅显示“功能演示”选项卡所示功能基于本扩展的实现源码'" style="padding: 15px; font-size: 14px;">
        <a href="~/Demos/ExtensionDemos/Datagrid/ColumnToggleDemo.rar" target="_self">下载本扩展功能演示Demo</a>
        <br />
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:20%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>enableHeaderContextMenu</td>
                <td>Boolean 类型</td>
                <td>
                    该属性表示是否启用表头右键菜单。
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>enableHeaderClickMenu</td>
                <td>Boolean 类型</td>
                <td>
                    该属性表示是否启用表头列点击按钮菜单。
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>headerContextMenu</td>
                <td>Array 类型</td>
                <td>
                    该属性表示表列头右键菜单，为一个 Array 对象；数组中的每一个元素都具有如下属性：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>id:         表示菜单项的 id；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>text:       表示菜单项的显示文本；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>iconCls:    表示菜单项的左侧显示图标；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>disabled:   表示菜单项是否被禁用(禁用的菜单项点击无效)；该属性可以是以下两种类型：<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Boolean 类型，默认为 false；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>Function 类型，该事件函数格式为 function(e, item, menu, grid, field)，其中 this 指向菜单项本身。<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>hideOnClick:    表示该菜单项点击后整个右键菜单是否立即自动隐藏；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>bold:           Boolean 类型值，默认为 false；表示该菜单项是否字体加粗；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>style:          JSON-Object 类型值，默认为 null；表示要附加到该菜单项的样式；<br />
                    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>handler:    表示菜单项的点击事件，该事件函数格式为 function(e, item, menu, grid, field)，其中 this 指向菜单项本身；
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>headerFilterMenuLength</td>
                <td>Number 类型</td>
                <td>
                    该属性表示表列头过滤菜单中显示的数据行数的个数，超过该个数的其他数据行将不显示。
                </td>
                <td>10</td>
            </tr>
        </table>
        <div style="font-size: 17px; font-weight: bold; margin-top: 15px;margin-bottom:10px;">
            列扩展属性API
        </div>
        <table class="tableAPI">
            <tr class="title">
                <td style="width:15%;">名称</td>
                <td style="width: 10%;">类型</td>
                <td>描述</td>
                <td style="width: 7%;">默认值</td>
            </tr>
            <tr>
                <td>hidable</td>
                <td>Boolean 类型</td>
                <td>
                    表示该列是否可隐藏
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>filterable</td>
                <td>Boolean 类型</td>
                <td>
                    表示该列是否可过滤
                </td>
                <td>true</td>
            </tr>
            <tr>
                <td>ignoreFormatterWhenFilter</td>
                <td>Boolean 类型</td>
                <td>
                    表示该列在 filterable 为 true 显示列数据时是否忽略 formatter 的存在
                </td>
                <td>false</td>
            </tr>
        </table>
    </div>
</div>
